/* -- GENERAL TYPOGRAPHY -- */
.fretTitle {
  color: #555;
  text-align: center;
  font-family: "Helvetica Neue", sans-serif;
  line-height: 1.4;
  font-size: 1.6em;
  margin: 10px 0 10px 0;
  font-weight: 900;
  padding: 5px;
}

section {
  padding: 20px;
}

.content {
  max-width: 960px;
  margin: auto;
}

/* Fretboard Container/Wrapper */

.fretContainer, .fretContainer_h {
  outline: solid 1px #eeee;
  margin: 0 auto;
  padding: 15px 0;
}

.fretContainer {
  width: 320px;
}

.fretContainer_h {
  max-width: 400px;
}

@media all and (max-width: 400px) {
  .fretContainer_h {
    max-width: 288px;
  }
}
@media all and (max-width: 420px) {
  .fretContainer {
    max-width: 220px;
  }
}
.svg_wrapper {
  background-color: #fff;
  position: relative;
  height: 0;
}

.svg_wrapper svg.fretboard_bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.svg_wrapper .cells {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.svg_wrapper.v4 {
  padding-top: 91.6666666667%;
}

.svg_wrapper.v5 {
  padding-top: 106.9444444444%;
}

.svg_wrapper.v7 {
  padding-top: 137.5%;
}

.svg_wrapper.v9 {
  padding-top: 168.0555555556%;
}

.svg_wrapper.v12 {
  padding-top: 213.8888888889%;
}

.svg_wrapper.v15 {
  padding-top: 259.7222222222%;
}

.svg_wrapper.v .cell svg {
  width: 12.5%;
  float: left;
  display: block;
}

.svg_wrapper.v4 .cell svg {
  height: 16.6666666667%;
}

.svg_wrapper.v5 .cell svg {
  height: 14.2857142857%;
}

.svg_wrapper.v7 .cell svg {
  height: 11.1111111111%;
}

.svg_wrapper.v9 .cell svg {
  height: 9.0909090909%;
}

.svg_wrapper.v12 .cell svg {
  height: 7.1428571429%;
}

.svg_wrapper.v15 .cell svg {
  height: 5.8823529412%;
}

.svg_wrapper.h5 {
  padding-top: 85.7142857143%;
}

.svg_wrapper.h6 {
  padding-top: 75%;
}

.svg_wrapper.h7 {
  padding-top: 72.7272727273%;
}

.svg_wrapper.h .cell svg {
  height: 12.5%;
  float: left;
  display: block;
  z-index: 2;
}

.svg_wrapper.h5 .cell svg {
  width: 14.2857142857%;
}

.svg_wrapper.h6 .cell svg {
  width: 12.5%;
}

.svg_wrapper.h7 .cell svg {
  width: 12.1212121212%;
}

/* Fretboard Element Styles */
.cell.dot .fretb_dot {
  fill: #27a9e1;
}

.cell.dot.root .fretb_dot {
  fill: #F05A28;
}

.cell.dot.faded .fretb_dot {
  opacity: 0.25;
}

.fretboard_bg .fret_bg rect {
  fill: #fff;
}

.fretboard_bg .frets rect {
  fill: #ddd;
}

.fretboard_bg .nut rect {
  fill: #6e6e6e;
}

.fretboard_bg .strings rect {
  fill: #6e6e6e;
}

.svg_wrapper.noNut .fretboard_bg .nut rect {
  fill: none;
}

/*# sourceMappingURL=i.css.map */

.markdown-body pre.fretboard {
  background-color: transparent;
}
